<template>
	<!-- 积分兑换商城 -->
	<view class="exchange">
		<!-- 头部搜索框 -->
		<view class="search">
		    <view class="search-box">
				<icon class="search-icon" type="search" size="20"></icon>
				<input class="search-input" type="text" placeholder="请输入搜索内容"></input>
			</view>
		</view>
		<!-- swiper轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in swiperArr" :key="index">
				<!-- <view class="swiper-item">{{item.imgUrl}}</view> -->
				<image :src="item.imgUrl" mode=""></image>
				<!-- <image src="../../static/images/swiper/swiper01.jpg" mode=""></image> -->
			</swiper-item>
		</swiper>
		<!-- 分类列表 -->
		<view class="flList">
			<ication :cateList="cateList"></ication>
		</view>
		<!-- 热门商品 -->
		<view class="hot">
			<view class="hot-title">热门商品</view>
			<goods :goodsList="goodsList" cleaType="exchange"></goods>
		</view>
		<!-- tabbar -->
		<tabBar currentPage="exchange"></tabBar>
	</view>
</template>

<script>
	import tabBar from "@/component/commen/tabbar.vue"//引入底部组件
	import ication from "@/component/ication.vue"//引入分类列表
	import goods from "@/component/hot.vue"//引入热门商品组件
	import $http from "@/component/commen/api/request.js";//引入封装的请求 
	export default {
		components:{
			tabBar,ication,goods
		},
		data() {
			return {
				swiperArr:[
					{
						id:0,
						imgUrl:"../../static/images/swiper/swiper01.jpg"
					},
					{
						id:1,
						imgUrl:"../../static/images/swiper/swiper02.jpg"
					}
				],//轮播图
				goodsList:[],//商品列表
				cateList:[],//分类列表
				
			};
		},
		mounted() {
			this.getcateList()
		},
		methods:{
			getcateList(){//获取相关商品信息
				// ?i=2&t=0&v=2.7.4&from=wxapp&c=entry&a=wxapp&do=goods&&m=wjyk_recycle&sign=35901cac4a0518d49f75a39969ec05ad
				$http({
					url:"?i=2&t=0&v=2.7.4&from=wxapp&c=entry&a=wxapp&do=goods&&m=wjyk_recycle&sign=35901cac4a0518d49f75a39969ec05ad",
					method:"get"
				}).then((res)=>{
					// console.log(res)
					this.cateList = res.data.cateList
					this.goodsList = res.data.list
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.exchange{
	padding-bottom: 150rpx;
	font-size: 29rpx;
	// 头部搜索框
	.search{
		// border:1px solid #f00;
		background: #00b388;
		padding-top: 30rpx;
		height: 100rpx;
		.search-box {
		  display: flex;
		  align-items: center;
		  padding: 8rpx;
		  width: 95%;
		  // border: 1px solid #ccc;
		  background: #fff;
		  border-radius: 30rpx;
		  margin: 0 auto;
		  .search-icon {
		    margin-right: 10rpx;
		  }
		  .search-input {
		    flex: 1;
		    // height: 30px;
		    // border: none;
		    outline: none;
		  }
		}
	}
	// 分类列表
	.flList{
		padding: 40rpx 10rpx;
		// border: 1px solid #000;
		background: #fff;
	}
	//热门商品
	.hot{
		padding: 0 20rpx;
		margin-top: 20rpx;
		.hot-title{
			font-size: 32rpx;
			font-weight: bold;
		}
	}
}
</style>
